import Notification from '../base/notification';

const prefixCls = 'haloe-notice';
const iconPrefixCls = 'haloe-icon';
const prefixKey = 'haloe_notice_key_';

let top = 24;
let bottom = 24;
let left = 24;
let right = 24;
let defaultDuration = 4.5;
let defaultPosition = 'top-right'
let noticeInstance = {
  'top-left': null,
  'top-right': null,
  'bottom-left': null,
  'bottom-right': null,
};
let name = 1;

// const iconTypes = {
//   'info': 'info',
//   'success': 'success',
//   'warning': 'warning',
//   'error': 'error'
// };
// icon图标改变
const iconTypes = {
  'info': 'info-circle-filled',
  'success':'check-circle-filled',
  'warning':'warning-filled',
  'error':'close-circle-filled'
};

const transitionName = 'move-notice';

function getNoticeInstance (position) {
  noticeInstance[position] = noticeInstance[position] || Notification.newInstance({
    prefixCls: prefixCls,
    styles: getNoticePosition(position),
    transitionName
  });
  return noticeInstance[position];
}
function getNoticePosition (position) {
  const verticalProperty = position.startsWith('top') ? 'top' : 'bottom'
  const horizontalProperty = position.endsWith('right') ? 'right' : 'left'
  return {
    [verticalProperty]: verticalProperty === 'top' ? `${top}px` : `${bottom}px`,
    [horizontalProperty]: horizontalProperty === 'right' ? `${right}px` : `${left}px`
  }
}

function notice (type, options) {
  const title = options.title || '';
  const desc = options.desc || '';
  const noticeKey = options.name || `${prefixKey}${name}`;
  const onClose = options.onClose || function () {};
  const render = options.render;
  const position = ['top-right', 'top-left','bottom-right', 'bottom-left'].includes(options.position) ? options.position: defaultPosition;
  // todo const btn = options.btn || null;
  const duration = (options.duration === 0) ? 0 : options.duration || defaultDuration;
  const { url = '', text = '' } = options?.detail ?? { url: '', text: '' }

  name++;

  let instance = getNoticeInstance(position);

  let content;

  let withIcon;

  const with_desc = (options.render && !title) ? '' : (desc || options.render) ? ` ${prefixCls}-with-desc` : '';

  if (type === 'normal') {
    withIcon = false;
    content = `
            <div class="${prefixCls}-custom-content ${prefixCls}-with-normal ${with_desc}">
                <div class="${prefixCls}-title">${title}</div>
                <div class="${prefixCls}-desc">${desc}</div>
        `;
    if(url && text) {
      content = `${content}<a class="${prefixCls}-detail" href=${url} target='_blank'>${text}<a/></div>`
    } else {
      content = `${content}</div>`
    }
  } else {
    const iconType = iconTypes[type];
    const outlineIcon='';
    withIcon = true;
    content = `
            <div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type} ${with_desc}">
                <span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
                    <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}${outlineIcon}"></i>
                </span>
                <div class="${prefixCls}-title">${title}</div>
                <div class="${prefixCls}-desc">${desc}</div>
        `;
    if(url && text) {
      content = `${content}<a class="${prefixCls}-detail" href=${url} target='_blank'>${text}<a/></div>`
    } else {
      content = `${content}</div>`
    }
  }
  instance.notice({
    name: noticeKey.toString(),
    duration: duration,
    styles: {},
    transitionName,
    content: content,
    withIcon: withIcon,
    render: render,
    hasTitle: !!title,
    onClose: onClose,
    closable: true,
    type: 'notice',
    position: position
  });
}
export default {
  open (options) {
    return notice('normal', options);
  },
  info (options) {
    return notice('info', options);
  },
  success (options) {
    return notice('success', options);
  },
  warning (options) {
    return notice('warning', options);
  },
  error (options) {
    return notice('error', options);
  },
  config (options) {
    if (options.position) {
      defaultPosition = options.position
    }
    if (options.top && defaultPosition.startsWith('top')) {
      top = options.top;
    }
    if (options.bottom && defaultPosition.startsWith('bottom')) {
      bottom = options.bottom;
    }
    if (options.duration || options.duration === 0) {
      defaultDuration = options.duration;
    }
  },
  close (name, position = defaultPosition) {
    const currentPosition = ['top-right', 'top-left','bottom-right', 'bottom-left'].includes(position) ? position: defaultPosition
    if (name) {
      name = name.toString();
      if (noticeInstance[currentPosition]) {
        noticeInstance[currentPosition].remove(name);
      } else {
        return false
      }
    } else {
      return false;
    }
  },
  destroy (position = defaultPosition) {
    const currentPosition = ['top-right', 'top-left','bottom-right', 'bottom-left'].includes(position) ? position: defaultPosition
    let instance = getNoticeInstance(currentPosition);
    noticeInstance[position] = null;
    instance.destroy('haloe-notice');
  }
};
